<template>
    <view class="Wrapper" :style="{ '--color': color }">
        <text class="size34 black">选择支付账户</text>
        <text class="h6 color_99 m-top10">{{ info }}</text>
        <!-- Active prohibit-->
        <block v-for="(item, index) in payData" :key="index">
            <view class="Method" :class="{ Active: item.select == 1, prohibit: item.select == 0 && methodFull >= 2 }">
                <view class="MethodPaly">
                    <view class="iconfont" :class="item.iconfont" :style="{ color: item.colour }"></view>
                    <text class="palyTxt">{{ item.title }}</text>
                    <text class="money" v-if="item.money">(￥{{ item.money }})</text>
                </view>
                <view class="seltBox" @click="selectItem(item, index)">
                    <view class="iconfont icon-xuanzhong"></view>
                </view>
            </view>
        </block>
        <view class="palyConfig" @click="Payment">确定</view>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData', 'info'],
        data() {
            return {
                payData: []
            };
        },
        methods: {
            selectItem(Item, Index) {
                if (Item.select == 0 && this.methodFull >= 2) return;
                const newPayData = [...this.payData];
                newPayData[Index].select = newPayData[Index].select == 1 ? 0 : 1;
                if (newPayData[Index].wxPay) {
                    newPayData[Index].wxPay = newPayData[Index].wxPay == 1 ? 0 : 1;
                }
                if (newPayData[Index].balancePay) {
                    newPayData[Index].balancePay = newPayData[Index].balancePay == 1 ? 0 : 1;
                }
                if (newPayData[Index].t_walletPay) {
                    newPayData[Index].t_walletPay = newPayData[Index].t_walletPay == 1 ? 0 : 1;
                }

                this.payData = newPayData; // 更新 payData
            },
            Payment() {
                const hasSelected = this.payData.some((item) => item.select === 1);
                if (!hasSelected) return this.$Toast('请选择支付方式');

                this.$emit('PayMethods', this.payData);
            }
        },
        computed: {
            ...mapState(['color']),
            methodFull() {
                if (!this.payData.length) return;
                const selectedItems = this.payData.filter((item) => item.select == 1);
                return selectedItems.length;
            }
        },
        watch: {
            pageData: {
                deep: true,
                immediate: true,
                handler(newVal) {
                    if (newVal) this.payData = newVal;
                }
            }
        }
    };
</script>

<style lang="scss" scopeds>
    .Wrapper {
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .Method {
        width: 100%;
        height: 160rpx;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        align-items: center;
        color: #000;

        .MethodPaly {
            flex: 1;
            display: flex;
            align-items: center;
            .iconfont {
                font-size: 70rpx;
            }
            // .icon-weixinzhifu {
            //     color: #16d46b;
            // }
            .palyTxt {
                font-size: 32rpx;
                font-weight: 500;
                margin-left: 24rpx;
            }
            .money {
                font-size: 32rpx;
                font-weight: 500;
            }
        }
        .seltBox {
            width: 40rpx;
            height: 40rpx;
            border: 1px solid #999;
            border-radius: 6rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-xuanzhong {
                color: #fff;
                font-size: 34rpx;
            }
        }
    }
    .prohibit {
        .iconfont,
        .palyTxt,
        .money {
            color: #ccc !important;
        }

        .seltBox {
            border: 1px solid #ccc !important;
        }
        .icon-xuanzhong {
            color: #fff !important;
        }
    }
    .Active {
        .seltBox {
            border: 1px solid var(--color);
            background-color: var(--color);
        }
    }
    .palyConfig {
        width: 360rpx;
        height: 88rpx;
        background-color: var(--color);
        color: #fff;
        font-size: 32rpx;
        margin: 40rpx auto 50rpx auto;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
